<template>
  <div class="city">
    <van-search
      v-model="city"
      class="header"
      left-icon="arrow-left"
      background="#ccc"
      placeholder="请输入城市搜索"
      @click-left-icon="
        () => {
          $router.push('/');
        }
      "
      @search="onSearch"
    />

    <div class="container">
      <h4>定位/历史</h4>
      <van-row class="row">
        <van-col span="8">
          <van-icon name="location-o" />
          {{ city1 }}
        </van-col>
        <van-col span="8">北京</van-col>
        <van-col span="8">合肥</van-col>
      </van-row>
      <h4>热门</h4>
      <van-row class="row">
        <van-col span="8" v-for="v in hotcity" :key="v">
          {{ v }}
        </van-col>
      </van-row>
    </div>
    <!--city  -->
    <van-index-bar highlight-color="skyblue">
      <div v-for="v in citylist" :key="v">
        <van-index-anchor :index="v.title" />
        <van-cell
          v-for="item in v.lists.filter((e) => {
            if (city === '') return true;
            else return e.includes(city);
          })"
          @click="
            () => {
              Sel(item);
            }
          "
          :key="item"
          :title="item"
        />
      </div>
    </van-index-bar>
  </div>
</template>

<script>
import axios from "axios";
import city from "../../mock/city";
export default {
  data() {
    return {
      city: "",
      citylist: city.city,
      hotcity: [
        "杭州",
        "北京",
        "上海",
        "广州",
        "深圳",
        "长沙",
        "天津",
        "南京",
        "郑州",
      ],
      city1: JSON.parse(localStorage.getItem("city1")),
    };
  },
  methods: {
    Sel(e) {
      console.log(e);
      localStorage.setItem("city1", JSON.stringify(e));
      this.$router.push('/train');
    },
  },
  mounted() {},
};
</script>

<style lang='scss' scoped >
.city {
  position: relative;
  --van-index-bar-index-font-size: 16px;
  --van-index-bar-index-line-height: 17px;
}
.header {
  width: 100%;
  display: flex;
  z-index: 999;
  justify-content: space-around;
}
.container {
  padding-left: 10px;
  line-height: 40px;
  background-color: rgba(219, 219, 219, 0.519);
  margin: 0px auto;
  .row {
    text-align: center;
  }
}
</style>